<template>
    <div class="goods">
        <div class="menu-wrapper" ref="menuWrapper">
            <ul>
                <li v-for="(item,index) in goods" @click="selectMenu(index,$event)" class="menu-item" :class="{'current':currentIndex === index }">
                    <span class="text border-1px">
                        <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>
                        {{item.name}}
                    </span>
                </li>
            </ul>
        </div>
        <div class="foods-wrapper" ref="foodsWrapper">
            <ul>
                <li v-for="item in goods" class="food-list" ref="foodList">
                    <h1 class="title">{{item.name}}</h1>
                    <ul>
                        <li v-for="food in item.foods" class="food-item border-1px">
                            <div class="icon">
                                <img width="57" height="57" :src="food.icon" alt="">
                            </div>
                            <div>
                                <div class="content">
                                    <h2 class="name">
                                        {{food.name}}
                                    </h2>
                                    <p class="desc">
                                        {{food.description}}
                                    </p>
                                    <div class="extra">
                                        <span class="count">月售{{food.sellCount}}份</span>
                                        <span>好评率{{food.rating}}%</span>
                                    </div>
                                    <div class="price">
                                        <span class="new">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">
                                            ￥{{food.oldPrice}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import BScroll from 'better-scroll';
    const ERR_OK = 0;
    export default {
        props:{
            seller:{
                type:Object
            }
        },
        data(){
            return {
                goods:[],
                listHeight:[],
                scrollY:0
            }
        },
        computed:{
            currentIndex(){
                for (let i = 0; i < this.listHeight.length; i++){
                    let height1 = this.listHeight[i];
                    let height2 = this.listHeight[i+1];
                    if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)){
                        return i;
                        //console.log(i);
                    }
                }
                return 0;
            }
        },
        created(){
            this.classMap = ['decrease','discount','special','invoice','guarantee'];

            this.$http.get('/api/goods').then((response)=>{
               response = response.body;
               if(response.errno == ERR_OK){
                   this.goods = response.data;
                   this.$nextTick(() => {
                       this._initScroll();
                       this._calculateHeight();
                   });
               }
            });
        },
        methods:{
            _initScroll(){
                this.meunScroll = new BScroll(this.$refs.menuWrapper, {
                    click: true
                });
                this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
                    click: true,
                    probeType: 3
                });

                this.foodsScroll.on('scroll',(pos)=>{
                    this.scrollY = Math.abs(Math.round(pos.y));
                    //console.log(this.scrollY);
                });
            },
            _calculateHeight(){
                let foodList = this.$refs.foodList;
                let height = 0;
                this.listHeight.push(height);
                for (let i = 0; i < foodList.length; i++) {
                    let item = foodList[i];
                    height += item.clientHeight;
                    this.listHeight.push(height);
                }
                console.log(this.listHeight);
            },
            selectMenu(index,event){
                if(!event._constructed){
                    return;
                }
                let foodList = this.$refs.foodList;
                let el = foodList[index];
                this.foodsScroll.scrollToElement(el,300);
                //console.log(index);
            }
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/mixin"
    .goods
        position :absolute
        top: 174px
        bottom :46px
        width :100%
        display :flex
        overflow :hidden
        .menu-wrapper
            flex :0 0 80px
            width :80px
            background-color :#f3f5f7
            .menu-item
                display :table
                height :54px
                width :56px
                line-height :14px
                padding:0 12px
                &.current
                    position :relative
                    z-index :10
                    margin-top :-1px
                    font-weight :700
                    background :#ffffff
                    .text
                        border-none()
                .icon
                    vertical-align :top
                    display :inline-block
                    width :12px
                    height :12px
                    margin-right :2px
                    background-size :12px
                    background-repeat :no-repeat
                    &.decrease
                        bg-image('decrease_3')
                    &.discount
                        bg-image('discount_3')
                    &.guarantee
                        bg-image('guarantee_3')
                    &.invoice
                        bg-image('invoice_3')
                    &.special
                        bg-image('special_3')
                .text
                    display :table-cell
                    width :56px
                    vertical-align :middle
                    border-1px(rgba(7,17,27,0.1))
                    font-size :12px
        .foods-wrapper
            flex :1
            .title
                padding-left :14px
                height :26px
                line-height :26px
                border-left :2px solid #d9dde1
                font-size :12px
                color: rgb(147,153,159)
                background :#f3f5f7
            .food-item
                display :flex
                margin :18px
                padding-bottom :18px
                border-1px(rgba(7,17,27,0.1))
                &:last-clild
                    border-none()
                    margin-bottom :0
                .icon
                    flex :0 0 57px
                    margin-right :10px
                .content
                    flex :1
                    .name
                        margin :2px 0 8px 0;
                        height :14px
                        line-height :14px
                        font-size :14px
                        color :rgb(7,17,27)
                    .desc,.extra
                        line-height :10px
                        font-size :10px
                        color :rgb(147,153,159)
                    .desc
                        margin-bottom :8px
                        line-height :12px
                    .extra
                        .count
                            margin-right :12px
                    .price
                        font-weight :700
                        line-height :24px
                        .new
                            margin-right :8px
                            font-size :14px
                            color :rgb(240,20,20)
                        .old
                            text-decoration :line-through
                            font-size :10px
                            color :rgb(147,153,159)
</style>
